<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>WebChat | 聊天记录</title>
    <jsp:include page="include/commonfile.jsp"/>
</head>
<body>
<jsp:include page="include/header.jsp"/>
<div class="am-cf admin-main">
    <jsp:include page="include/sidebar.jsp"/>

    <!-- content start -->
    <div class="admin-content">
        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">聊天记录</strong> / <small>records</small></div>
        </div>
        <div class="am-tabs am-margin" data-am-tabs>
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1">我发送出去的</a></li>
                <li><a href="#tab2">我接收到的</a></li>
                
            </ul>
            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <hr>
                    <!--        <blockquote>
                        <p>发出的聊天记录</p>
                       
                        
                    </blockquote>      -->
                    
                    <div class="am-tabs am-margin">
            <table class="am-table am-table-striped">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>接收方</th>
                        <th>内容</th>
                        <th>时间</th>  
                    </tr>
                </thead>
                
                   <tbody>
                    <c:forEach items="${listFromID}" var="ChatRecord" varStatus="status">
                        <tr>
                            <td>${status.index + 1}</td>
                            <td>${ChatRecord.toid}</td>
                            <td>${ChatRecord.message}</td>
                    		<td>${ChatRecord.time}</td>
                        </tr>
                    </c:forEach>
                </tbody>     
                
            </table>
            <div id="page" style="float: right"></div>
        </div>
                    
                    
                   
                </div>

                <div class="am-tab-panel am-fade am-in" id="tab2">
                    <!--        <blockquote>
                        <p>发出的聊天记录</p>
                       
                        
                    </blockquote>      -->
                    
                    <div class="am-tabs am-margin">
            <table class="am-table am-table-striped">
                <thead>
                    <tr>
                        <th>序号</th>
                       
                        <th>发送方</th>
                        <th>内容</th>
                        <th>时间</th>
                        
                    </tr>
                </thead>
                
               <tbody>
                    <c:forEach items="${listToID}" var="ChatRecord" varStatus="status">
                        <tr>
                            <td>${status.index + 1}</td>
                            <td>${ChatRecord.toid}</td>
                            <td>${ChatRecord.message}</td>
                    		<td>${ChatRecord.time}</td>
                        </tr>
                    </c:forEach>
                </tbody>         
                
            </table>
            <div id="page2" style="float: right"></div>
                </div>

   
            </div>
        </div>
        <!-- content end -->
    </div>
    <a href="#" class="am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}">
        <span class="am-icon-btn am-icon-th-list"></span>
    </a>
    <jsp:include page="include/footer.jsp"/>
    <script>
    $(function(){
        laypage({
            cont: 'page',//类似div里的 id
            pages:${countFromID},       
            curr: function(){
                var page = location.search.match(/page=(\d+)/);
                return page ? page[1] : 1;
            }(),
            skin: '#AF0000',
            groups: 5, //连续显示分页数
            jump: function(e, first){ //触发分页后的回调
                if(!first){ //一定要加此判断，否则初始时会无限刷新
                    location.href = '?page='+e.curr;
                }
            }
        });
        laypage({
            cont: 'page2',
            pages:${countToID},       
            curr: function(){
                var page = location.search.match(/page=(\d+)/);
                return page ? page[1] : 1;
            }(),
            skin: '#AF0000',
            groups: 5, //连续显示分页数
            jump: function(e, first){ //触发分页后的回调
                if(!first){ //一定要加此判断，否则初始时会无限刷新
                    location.href = '?page='+e.curr;
                }
            }
        });
    });
   
    </script>
    
    
    
    
    
    
    
    
    
</body>
</html>
